<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript">
        localPath="report-form"
    </script>
    <link rel="stylesheet" type="text/css" media="all" href="/js/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/daterangepicker/moment.js"></script>
    <script type="text/javascript" src="/js/daterangepicker/daterangepicker.js"></script>
</head>
<body>
<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">表单统计</h3>
</div>


<div class="p-md table-paginate">
  <div class="panel panel-default">
  <div id="search" class="panel-body">
				<form class="form-inline" id="formId" action="/reports/exportCsv" method="post">
                    <div class="form-group">接收时间:</div>
                    <div class="time-config form-group reports-form-date">
                      <input type="text" id="config-demo" class="form-control">
                      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                      <input type="hidden" name="createdAt" id="createdAt">
                      <input type="hidden" name="end_date" id="end_date">
                    </div>

                    <div class="form-group">
                        <select name="" id="searchLabel" class="form-control w">
                            <option value="0" selected >姓名</option>
                            <option value="1">手机号/微信号</option>
                        </select>
                    </div>
                
                    <div class="form-group search-item">
                        <input type="text" name="value1"  class="text-center form-control"  id="value1" placeholder="请输入姓名">
                    </div>


                    <div class="form-group search-item hide">
                        <input type="text" name="value2"  class="text-center form-control"  id="value2" placeholder="请输入手机/微信号">
                    </div>

                    <div class="form-group">
                        <button id="button" type="button" class="btn btn-sm btn-success ng-click-active">查询</button>
                    </div>

                    <div class="form-group">
                        <button id="import" type="submit" class="btn btn-sm btn-success ng-click-active">导出</button>
                    </div>
				</form>
			</div>
    <table id="formTable" class="table table-bordered table-hover bg-white">
      <thead>
        <tr>
          <th>接收时间</th>
          <th>姓名</th>
          <th>手机号/微信</th>
          <th>备注</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      	<col />
      	<col width="15%">
        <col width="15%" />
         <col width="15%" />
        <col width="10%" />
        <col width="15%" />
      </tbody>
    </table>
  </div>
</div>

<script type="text/javascript" src="/js/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/dataTables/dataTables.init.js"></script>
<script type="text/javascript" src="/js/dataTables/dataTables.forms.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script type="text/javascript" src="/js/messages_zh.js"></script>
<script type="text/javascript" src="/js/jquery-validate.bootstrap-tooltip.js"></script>
<script type="text/javascript" >
    $(document).ready(function() {
        // 手机号码验证
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var mobile = /^\+?[0-9][0-9]*$/;
            return this.optional(element) || (mobile.test(value));
        });
        $("#formId").validate({
            rules: {
                value2:{isMobile:true}
            },
            messages: {
                value2:{ isMobile:"手机号码必须为数字"}
            }
        });

    });
</script>
<script type="text/javascript">
<<<<<<< HEAD
    // $('#createdAt').val(new Date());
    // $('#end_date').val(new Date());
=======

    $('#createdAt').val(moment().format('YYYY-MM-DD'));
    $('#end_date').val(moment().format('YYYY-MM-DD'));
>>>>>>> f60892e6c150032175fdfe7fb8ed446a5acba16e
    // 初始化时间控件
    var index = '';
    $('#config-demo').daterangepicker({
        autoUpdateInput: false,
        dateFormat: 'yy-mm-dd',
        "ranges": {
            "今天": [moment().startOf('day'), moment()],
            "昨天": [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
            "过去7天": [moment().subtract('days', 6), moment()],
            "过去30天": [moment().subtract('days', 29), moment()]
        },
        opens : 'right', //日期选择框的弹出位置
        applyClass : 'btn-small btn-primary blue',
        cancelClass: 'cancel-btn-style',
        maxDate: new Date(),
        locale : {
            cancelLabel: 'Clear',
            applyLabel : '确定',
            cancelLabel : '清空',
            customRangeLabel : '自定义',
            fromLabel: new Date(),
            toLabel : new Date(),
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                       '七月', '八月', '九月', '十月', '十一月', '十二月' ],
            firstDay : 1,
            format : 'YYYY-MM-DD',
        },
    }, function(start, end, label) {
        console.log(label)
        switch(label)
        {
        case "今天":
          index = 1;
          break;
        case "昨天":
          index = 2;
          break;
        case "过去7天":
          index = 3;
          break;
        case "过去30天":
          index = 4;
          break;
        }
        $('#createdAt').val(start.format('YYYY-MM-DD'));
        $('#end_date').val(end.format('YYYY-MM-DD'));
    });
    // 清空时间控件
    $('#config-demo').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        $('#createdAt').removeAttr('value');
        $('#end_date').removeAttr('value');
    });

    $('#config-demo').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
    });

    // 查询 条件选取
    $('#searchLabel').on('change', function () {
        var index = $(this).children('option:selected').val();
        $('.search-item').find('input').val("");
        $('.search-item').eq(index).removeClass('hide').siblings('.search-item').addClass('hide');
    });





    function getDialog(id){
    	var map =null;
    	$.ajax({
     		url: "/reports/forms/"+id,
     		type: "GET",
     		dataType: "json",
     		cache: false,
     		async: false,
     		success: function(data) {
     			map=data
     		}
     	})

    	bootbox.dialog({
        title : "客户表单反馈",
        message : "<div class='well ' style='margin-top:25px;'>"+
        "<form id='forms' class='form-horizontal' role='form'>"+
        "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>客户状态</label><div class='col-sm-9'>"+
        "<select name='status' id='status' class='form-control'><option  value='1' "+getStatus(map.status,1)+" >有效</option><option value='2' "+getStatus(map.status,2)+">待定</option> <option value='3' "+getStatus(map.status,3)+">无效</option> </select></div></div>"+
       "<div class='space-4'></div>"+
       "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtNewPwd1'>备注</label><div class='col-sm-9'>"+
       "<textarea name='remark' id='remark' class='text form-control' maxlength='255' >"+putRemark(map.remark)+"</textarea></div></div>"+
        "</form></div>",
        buttons : {
            "success" : {
                "label" : "<i class='icon-ok'></i> 保存",
                "className" : "btn-sm btn-success",
                "callback" : function() {
                    var txt1 = $("#status").val();
                    var txt2 = $("#remark").val();
                    var info = {"status":txt1,"remark":txt2};
                    $.ajax({
                		url: "/reports/forms/"+id,
                		type: "POST",
                		dataType: "json",
                		data:info,
                		cache: false,
                		async: false,
                		success: function(data) {
                			bootbox.dialog({
                				message:"修改成功",
                				buttons:{
                					"success":{
                						"label" : "<i class='icon-ok'></i> 确定",
                              			 "className":"btn-sm btn-success",
                						 "callback" : function() {
                							 location.reload();
                						 }
                					}
                				}
                			});
                		}
                	});	
                }
            },
            "cancel" : {
                "label" : "<i class='icon-info'></i> 取消",
                "className" : "btn-sm btn-danger",
                "callback" : function() { }
            }
        }
        })
    }

    function getStatus(status,value){
    	if(status==value)
    		return "selected='selected'"
    	else
    		return
    }

    function putRemark(value){
    	if(value){
    		return value;
    	}else{
    		return "";
    	}
    }

    function getDetailDialog(id,mediums, sourceType){
        var content="";
        $.ajax({
            url:"/reports/mikeDetail/"+id,
            type:"GET",
            dataType:"json",
            cache:false,
            async:false,
            success:function(data){
                var json=JSON.parse(data.content);
                if(sourceType == 2){
                    var used_column_descs = JSON.parse(json.used_column_descs)
                    var used_columns = JSON.parse(json.used_columns)
                    if (used_columns) {
                        for (var i = 0; i < used_columns.length; i++) {
                            if (used_columns[i] != 'submit') {
                                content += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>" + used_column_descs[i] + "</label><div class='col-sm-9'>" +
                                        "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>" + json['' + used_columns[i]] + "</div></div></div>"
                            }
                        }
                    }
                    /*if (json.name) {
                     content += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>姓名</label><div class='col-sm-9'>" +
                     "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>" + json.name + "</div></div></div>"
                     }
                    if (json.phone) {
                        content += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>手机号</label><div class='col-sm-9'>" +
                                "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>" + json.phone + "</div></div></div>"
                    }
                    if (json.qq) {
                        content += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>qq</label><div class='col-sm-9'>" +
                                "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>" + json.qq + "</div></div></div>"
                    }
                    if (json.weixin) {
                        content += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>微信号</label><div class='col-sm-9'>" +
                                "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>" + json.weixin + "</div></div></div>"
                    }
                    if (json.custom) {
                        content += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>婚期</label><div class='col-sm-9'>" +
                                "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>" + json.custom + "</div></div></div>"
                     }*/
                } else {
                    for(var i=0;i<50;i++){
                        var strings = eval(json.component[i]);
                        if(strings!=null&&strings!=""){
                            //console.log(strings);
                            if(strings.name.indexOf("checkBox")>-1||strings.name.indexOf("Checkbox")>-1){
                                var s="";
                                for(var j=0;j<10;j++){
                                    if(strings.value[j]!=null&&strings.value[j]!=""){
                                        s+=strings.value[j]+" , ";
                                    }else{
                                        break;
                                    }
                                }
                                s=s.substring(0,s.length-2);
                                content+="<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>"+strings.title+"</label><div class='col-sm-9'>"+
                                        "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>"+s+"</div></div></div>"
                            }else{
                                content+="<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='txtOldPwd'>"+strings.title+"</label><div class='col-sm-9'>"+
                                        "<div name='remark' id='remark' class='text form-control' maxlength='255' style='border: hidden'>"+strings.value+"</div></div></div>"
                            }
                        }else{
                            break;
                        }
                    }
                }
            }
        });

        bootbox.dialog({
            title:"客户表单反馈详细信息",
            message:"<div class='well ' style='margin-top:25px;'>"+
                "<form class='form-horizontal' role='form'>"+content+
                "</form></div>",
            buttons:[{
                label:"返回",
                action:function(self){
                    self.close();
                }
            }]
        })
    }
</script>
</body>
</html>